<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    document.body.style.backgroundColor = 'red';
    // document.body.style.backgroundColor = 'blue';
    Promise.resolve().then(() => {
      document.body.style.backgroundColor = 'black';
    })
    setTimeout(() => {
      document.body.style.backgroundColor = 'blue';
    })
    // 先 是 red 在变成 blue ？？
    // 不同的任务放去 不同的队列
    // 属于 属于同一个 task， task queue队列里面去
    // 1：task 执行，后一个 backgroundColor 覆盖前面的backgroundColor
    // 2：
    // 3：渲染
    // task queue：[backgroundColor = 'red' settimeout,  backgroundColor = 'blue';]

    // process:
    // 1: backgroundColor = 'red',settimeout
    // 2:
    // 3: 渲染 red
    // 1: backgroundColor = 'blue'
    // 2:
    // 3: 渲染 blue

    // task: [backgroundColor = 'red', backgroundColor = 'blue']
    // microTask: [backgroundColor = 'black']
    // process
    // 1: backgroundColor = 'red'
    // 2: backgroundColor = 'black'
    // 3: render 'black'

    // 1: backgroundColor = 'blue'
    // 2: 
    // 3: render 'blue'
    // while(event-loop) { 一个 task， 所有 Microtask ，渲染 }
    function render() {
      requestAnimationFrame(render);
    }
    render();
  </script>
</body>

</html>